@use "../variables" as *;
@use "sass:color";

.webcam-stream-unavailable p {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
  text-align: center;
  font-size: 1.5rem;
}

.webcam-widget {
  .no-flipper-image-container {
    background: none !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 5px;
    img {
      max-width: 100% !important;
    }
  }
  .image-flipper {
    p,
    button {
      color: $white;
    }
  }
}

.webcam-stream-unavailable {
  position: relative;
  width: 100%;
}

.webcam-stream-unavailable img {
  width: 100%;
  max-width: 100%;
  opacity: 0.40;
}

.webcam-stream-valid {
  img, iframe {
    display: flex;
    margin: auto;
    max-height: 650px;
  }
  img {
    max-width: 100%;
    min-height: 100px;
  }
  iframe {
    width: 100%;
    border: none;
    min-height: 300px;
  }
}
